<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
  </head>
  <body>
    <div id="app">
      <!-- 过滤器的调用 -->
      <p>{{ msg | contentfilter}}</p>
      <ul>
        <!-- <li>小米-付款方式:支付宝</li> -->
        <li v-for="item in goods" :key="item.gid">
          {{ item.name }}-付款方式:{{ item.type | fukuan }}
        </li>
      </ul>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /*
        过滤器：
            * 全局
            * 局部
      */
    Vue.filter("fukuan", function (val) {
      console.log(val);
      switch (val) {
        case 1:
          return "支付宝";
        case 2:
          return "微信";
        case 3:
          return "银行卡";
      }
    });

    new Vue({
      el: "#app",
      data: {
        msg: "小学生通过操场扔垃圾",
        goods: [
          {
            gid: 1,
            name: "小米",
            type: 1,
          },
          {
            gid: 2,
            name: "小米2",
            type: 3,
          },
          {
            gid: 3,
            name: "小米3",
            type: 2,
          },
        ],
      },

      //过滤器
      filters: {
        contentfilter(value) {
          if (!value.trim()) {
            return;
          }
          return value
            .replace("小学生", "***")
            .replace("操", "***")
            .replace("垃圾", "***");
        },
      },
    });
  </script>
</html>
